<template>
	<view>
		<global-contact></global-contact>
		<view class="head">
			<block  v-if="keyList.length>0">
				<view class="path" v-for="(item,index) in keyList" :key="index">
					<text>{{item.text}}</text>
					<image src="https://www.atuanjian.com/appletStatic/static/cloae.png" mode="aspectFit" @click="close(item,index)"></image>
				</view>
			</block>
			<block v-else>
				<text class="reset">请选择筛选条件</text>
			</block> 
		</view>
		
		<view class="content" v-if="category.length>0">
			<view class="left">
				<scroll-view scroll-y="true" class="scroll1">
					 <view :class="menuIndex==index?'item active':'item'" v-for="(item,index) in category" :key="index" >
					 	<view class="circle"></view>
					 	<text>{{item.text}}</text>
					 </view>
				</scroll-view> 
			</view>  
			
			<view class="category"  >
				<!-- category[menuIndex] --> 
                <scroll-view scroll-y="true" class="scroll4">
                    <view class="wraper">
                        <view :class="item.check?'item active':'item'" v-for="(item,index) in category[menuIndex].child" :key="index" @click="categoryClick(item,index)">
                            <view class="title">{{item.text}}</view> 
                        </view> 
                    </view>
                </scroll-view> 
			</view>
			
		</view>
		<view class="footer">
			<view class="left" @click="clear()">清空条件</view>
			<view class="right" @click="viewMore()">查看团建产品</view>
		</view>
	</view>
</template>

<script> 
	import {productType,newsShow,categoryIndex} from '@/utils/request.js'
	export default {
		data() {
			return { 
				isChange:'',
                keyList:[],
                
                menuIndex:0,
				category:[
                    // {
                    //     text:'新闻分类',
                    //     child:[{
                    //         text:'公司新闻',
                    //         id:'',
                    //         check:false
                    //     },{
                    //         text:'行业动态',
                    //         id:'',
                    //         check:false
                    //     },{
                    //         text:'活动创意',
                    //         id:'',
                    //         check:false
                    //     },{
                    //         text:'活动攻略',
                    //         id:'',
                    //         check:false
                    //     }]
                    // }
                ],  // 数据源
				 
			}
		},
		methods: {  
            // 首页category 轮播导航
			async categoryIndex(){
				return await categoryIndex()
			},
			getCategory(){
				this.categoryIndex().then(res=>{  
					res.menu.forEach(val=>{
						if(val.id==31){  
                            if(val.hasOwnProperty('child')){
                                val.child.forEach(val=>{
                                    Object.assign(val,{check:false})
                                })
                                this.category=[]
                                this.category.push(val)
                                console.log(this.category,'123123')
                                this.defaultList=JSON.parse(JSON.stringify(this.category))
                            }
						}
					})
					
				}).catch(err=>{
					// console.log(err)
				})
            },
            
			// 点击二级     
			categoryClick(item,index){
				 console.log('点击一级',item)
			 this.category[this.menuIndex].child.forEach(val=>{
                    if(val.check){
                        val.check=false
                    }
                })
                this.category[this.menuIndex].child[index].check=true
                this.keyList[0]=this.category[this.menuIndex].child[index]

				this.$forceUpdate()
            },

            // 清空
            clear(){
                this.keyList=[]
                this.menuIndex=0
                this.navIndex=0
                this.cityIndex=-1
                this.category=this.defaultList
            },
            // 团建产品
            viewMore(){
                // uni.setStorageSync('mark_id',this.categoryId)
                // uni.setStorageSync('categoryData',JSON.stringify(this.category))
                // let data=JSON.stringify(this.keyList)
                // uni.setStorageSync('saveData',data)
                // uni.setStorageSync('goods',data) 
                console.log('more',this.keyList[0].id)
                uni.setStorageSync('newsID',this.keyList[0].id)
                uni.navigateBack({
                    delta:1
                })
            }
            
            // getNewsList(data){
			// 	this.newsShow(data).then(res=>{ 
			// 		console.log(res,'newsShow')
			// 		//  this.newsMain=res
			// 	}).catch(err=>{
			// 		// console.log(err)
			// 	})
			// },
			// close(item,index){
			// 	this.keyList.splice(index,1) 
			// 	// ing 刷新当前页面 
			// 	this.category.forEach(val=>{
			// 		if(val.child&&val.child.length>0){
			// 			val.child.forEach(val2=>{
			// 				if(val2.id==item.id){
			// 					val2.check=false
			// 				}
			// 				if(val2.child&&val2.child.length>0){
			// 					val2.child.forEach(val3=>{
			// 						if(val3.id==item.id){
			// 							val3.check=false
			// 						}
			// 					})
			// 				}
			// 			})
			// 		}
			// 	})
			// 	this.$forceUpdate()
				
			// },
                
            
			// 计算 当前页面展示的数据 返回上一页面的id
			// getComputed(){
			// 	// console.log('list',this.category[this.menuIndex])
			// 	this.keyList=[]
			// 	this.category.forEach(val=>{
			// 		if(val.child&&val.child.length>0){
			// 			// 第一级
			// 			val.child.forEach(val2=>{
			// 				if(val2.check){
			// 					this.keyList.push({
			// 						text:val2.text,
			// 						id:val2.id,
			// 						pid:val2.pid,
			// 						hot:'hot'
			// 					})
			// 				}
			// 				if(val2.child&&val2.child.length>0){
			// 					val2.child.forEach(val3=>{
			// 						if(val3.check){
			// 							this.keyList.push({
			// 								text:val3.text,
			// 								id:val3.id,
			// 								pid:val3.pid,
			// 								hot:'hot'
			// 							})
			// 						}
			// 					})
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			
			
			// left menu
			// menuClick(item,index){
			// 	if(this.menuIndex!=index){
			// 		this.menuIndex=index // 左侧所有的大类 类目 
			// 		this.navIndex=0 //城市大类
			// 		if(item.text=='活动目的地'){
			// 			this.type=0
			// 		}else{
			// 			this.type=1
			// 		} 
			// 	}
			// },
			// right header
			// navClick(item,index){
			// 	if(this.navIndex!=index){
			// 		this.navIndex=index
			// 		// this.cityIndex=-1
			// 		// this.activeItem=-1
			// 	}
			// },
			  
			// right content 仅对城市
			// cityClick(item,index){
			// 	//点击城市   ???
			// 	// console.log('点击具体的城市',index,this.category[this.menuIndex].child[this.navIndex].child[index])
			// 	let flag=this.category[this.menuIndex].child[this.navIndex].child
			// 	if(flag[index].is_radio==1){
			// 		if(flag[index].check){
			// 			this.category[this.menuIndex].child[this.navIndex].child[index].check=false
			// 		}else{
			// 			this.category[this.menuIndex].child[this.navIndex].child.forEach((val,i)=>{
			// 				if(val.check){
			// 					val.check=false 
			// 				}
			// 			})
			// 			this.category[this.menuIndex].child[this.navIndex].child[index].check=true
			// 		} 
			// 	}else{ // 多选
			// 		this.category[this.menuIndex].child[this.navIndex].child[index].check=!this.category[this.menuIndex].child[this.navIndex].child[index].check
			// 	}
			// 	this.getComputed()
			// 	this.$forceUpdate()
			// 	console.log('城市',this.category[this.menuIndex].child)
				 
			// },
		
			// 热门需求 仅对二级点击 
			// activeItemClick(item,index,i){
			// 		//    3   /   2
			// 		console.log('二级点击',item,index,i) 
			// 		this.activeIndex=i 
			// 		this.activeItem=index  
			// 		if(item.is_radio==1){
			// 			if(item.check){
			// 				this.category[this.menuIndex].child[i].child[index].check=false
			// 			}else{
			// 				this.category[this.menuIndex].child[i].child.forEach(val=>{
			// 					if(val.check){
			// 						val.check=false
			// 					} 
			// 				})
			// 				this.category[this.menuIndex].child[i].child[index].check=true
			// 			}
			// 		}else{
			// 			this.category[this.menuIndex].child[i].child[index].check=!this.category[this.menuIndex].child[i].child[index].check
			// 		}
			// 		this.getComputed()
			// 		this.$forceUpdate() 
			// },
		},
		onLoad(option) {
            //  this.getNewsList()
            this.getCategory()
		},
		onShareAppMessage() {
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.head{
		height: 56rpx;
		padding: 32rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 12rpx;
		font-size: 0;
		    overflow-x: auto;
		    white-space: nowrap;
		.path{
			height: 56rpx;
			display: inline-block;
			padding: 0 20rpx;
			line-height: 56rpx;
			background-color: #FF9900;
			border-radius: 38rpx;
			font-size: 0;
			margin-right: 20rpx;
			text{
				font-size: 28rpx;
				font-family: 苹方-简;
				font-weight: normal; 
				color: #FFFFFF;
				display: inline-block;
				vertical-align: middle;
			}
			image{
				width: 18rpx;
				height: 18rpx;
				display: inline-block;
				vertical-align: middle;
				margin-left: 12rpx;
			}
		}
		.reset{
			display: block;
			height: 56rpx;
			line-height: 56rpx;
			font-size: 28rpx;
			font-family: 苹方-简;
			font-weight: normal; 
			color: #666666;
		}
	}
	.content{
		@include flex_style(flex-start,flex-start,row nowrap);
		padding-bottom: 108;
		.left{
			background-color: #F4F4F4;
			width: 280rpx;
			.scroll1{
				height: 80vh; // vh+
				.item{
					padding-left: 30rpx;
					@include flex_style(flex-start,center,row nowrap);
					.circle{
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						margin-right: 30rpx;
					}
					text{
						font-size: 32rpx;
						font-family: 苹方-简;
						font-weight: normal;
						line-height: 104rpx;
						color: #666666;
					}
				}
				.active{
					background-color: #FFFFFF;
					.circle{
						background-color: #FF9900;  
					}
					text{ 
						color: #333333;
						font-weight: bold;
					}
				}
			} 
		}
		.right{
			width: 470rpx;
			background-color: #FFFFFF;
			.scroll2{
				height: 104rpx;
				.nav{
					@include flex_style(space-between,center,row nowrap);
					white-space: nowrap;
					padding-left: 40rpx;
					.items{
						padding-top: 30rpx;
						@include flex_style(flex-start,center,column nowrap);
						// margin-right: 72rpx;
						margin-right: 40rpx;
						text{
							font-size: 32rpx;
							font-family: 苹方-简;
							font-weight: normal;
							// line-height: 42px;
							color: #333333;
						}
						.line{
							// width: 64rpx;
							width: 80%;
							height: 6rpx;
							margin-top: 18rpx;
							background-color: #FFFFFF;
						}
					}
					.active{
						.line{
							background-color: #FF9900;
						}
					}
				}
			} 
			.contain{
				border-top: 2rpx solid #F4F4F4;
				background-color: #FFFFFF; 
				.scroll3{
					height: 77vh;
					.wrap{
						.text{
							padding-left: 36rpx;
							line-height: 104rpx;
							font-size: 30rpx;
							font-family: 苹方-简;
							font-weight: normal; 
							color: #1A1A1A;
						}
						.active{ 		
							font-size: 34rpx; 
							font-weight: 600;
							color: #FF9900;
						}
					}
				} 
			}
		}
		.category{ 
			width: 470rpx;
			.scroll4{
				height: 83.77vh; // vh+
				.wraper{
					background-color: #FFFFFF;
					padding: 36rpx 38rpx 10rpx 40rpx;
					.item{
						margin-bottom: 20rpx;
						.title{
							font-size: 30rpx;
							font-family: PingFang SC; 
							line-height: 40rpx;
							color: #1A1A1A; //#FF9900
							margin-bottom: 22rpx;
						}
						.list{
							@include flex_style(flex-start,center,row wrap);
							text{
								margin-right: 24rpx;
								margin-bottom: 20rpx;
								font-size: 20rpx;
								font-family: 苹方-简;
								font-weight: normal;
								line-height: 28rpx;
								color: #666666;
							}
							.active{
								color: #FF9900;
							}
						} 
					}
					.active{
						.title{ 
							color: #FF9900;
						}
					}
				}
			}
		}
	}
	.footer{
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		box-shadow: 0px 0px 12rpx rgba(140, 140, 140, 0.16);
		@include flex_style(flex-start,flex-start,row nowrap);
		.left{
			width: 280rpx;
			line-height: 108rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: 苹方-简;
			font-weight: normal; 
			color: #333333;
			background-color: #FFFFFF;
		}
		.right{
			width: 470rpx;
			line-height: 108rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: 苹方-简;
			font-weight: normal; 
			color: #FFFFFF;
			background-color: #222222;
		}
	}
</style>
